<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Expand, Fold } from '@element-plus/icons-vue'
import ChatAssistant from './components/ChatAssistant.vue'

const route = useRoute()
const router = useRouter()

// 控制侧边栏是否收起的状态，默认为展开（false）
const isSidebarCollapsed = ref(false)

const activeIndex = computed(() => {
  if (route.path === '/') return '1'
  if (route.path === '/mars') return '2'
  if (route.path === '/science') return '3'
  if (route.path === '/professional') return '4'
  // 修改：将登录和注册页面都标记为同一个导航项
  if (route.path === '/login' || route.path === '/register') return '5'
  return '1'
})

// 计算页面内容容器的类名
const mainContentClass = computed(() => {
  const classes = []
  if (route.path === '/science' || route.path === '/professional') {
    classes.push('chat-page')
  }
  if (route.path === '/mars') {
    classes.push('mars-page')
  }
  return classes
})

// 定义需要被 keep-alive 缓存的组件名称
const cachedViews = ['ChatAssistant', 'ScienceChat', 'ProfessionalChat']

// 切换侧边栏状态并添加动画效果
const toggleSidebar = () => {
  const button = document.querySelector('.sidebar-toggle')
  if (button) {
    button.classList.add('animating')
    // 使用 setTimeout 确保动画触发
    setTimeout(() => {
      button.classList.remove('animating')
    }, 300)
  }

  isSidebarCollapsed.value = !isSidebarCollapsed.value

  // 向iframe发送消息，控制侧边导航栏的展开和收起
  if (route.path === '/mars' && (window.frames as any)['mars-iframe']) {
    (window.frames as any)['mars-iframe'].postMessage({
      type: 'TOGGLE_LEFT_SIDEBAR',
      payload: {
        isCollapsed: isSidebarCollapsed.value
      }
    }, '*')
  }
}

function handleSelect(key: string) {
  console.log('Selected:', key)
  if (key === '1') {
    router.push('/')
  } else if (key === '2') {
    router.push('/mars')
  } else if (key === '3') {
    router.push('/science')
  } else if (key === '4') {
    router.push('/professional')
  } else if (key === '5') {
    // 修改：点击登录/注册统一跳转到登录页面
    router.push('/login')
  }
}

// 监听路由变化，重置侧边栏状态
watch(() => route.path, (newPath) => {
  // 当切换到火星地图页面时，重置侧边栏状态为展开
  if (newPath === '/mars') {
    isSidebarCollapsed.value = false
  }
})
</script>

<template>
  <!-- 顶部导航 -->
  <el-menu
    mode="horizontal"
    background-color="transparent"
    text-color="#ffffff"
    active-text-color="#ff9800"
    :default-active="activeIndex"
    @select="handleSelect"
    class="top-navigation"
  >
    <!-- 添加侧边栏切换按钮 -->
    <div 
      v-if="route.path === '/mars'" 
      class="sidebar-toggle"
      @click="toggleSidebar"
    >
      <el-icon>
        <Fold v-if="!isSidebarCollapsed" />
        <Expand v-else />
      </el-icon>
    </div>
    
    <!-- <div class="logo-container">
      <img src="./images/logo2.png" alt="Logo" class="logo" />
    </div> -->
    <div class="menu-items">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">数据服务</el-menu-item>
      <el-menu-item index="3">火星科普大模型</el-menu-item>
      <el-menu-item index="4">专业大模型</el-menu-item>
      <!-- 修改：将菜单项文本改为"登录/注册"但只使用一个索引 -->
      <!-- <el-menu-item index="5">登录/注册</el-menu-item> -->
    </div>
  </el-menu>

  <!-- 路由内容 -->
  <div class="main-content" :class="mainContentClass">
    <keep-alive :include="cachedViews">
      <router-view />
    </keep-alive>
  </div>
  
  <!-- 聊天助手 - 全局显示 -->
  <ChatAssistant />
</template>

<style scoped>
.top-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  backdrop-filter: blur(10px);
  /* background: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.7) 0%, 
    rgba(0, 0, 0, 0.5) 30%, 
    rgba(0, 0, 0, 0.3) 70%, 
    rgba(0, 0, 0, 0.1) 100%) !important; */
  background: #25212c !important;
  height: 80px; /* 将导航栏高度调整为80px */
  border: none !important; /* 移除默认边框 */
}

/* 移除Element Plus菜单的底部边框 */
.top-navigation :deep(.el-menu--horizontal) {
  border-bottom: none !important;
}

/* 侧边栏切换按钮样式 */
.sidebar-toggle {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 24px;
  color: #ffffff;
  z-index: 1001;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.sidebar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 添加旋转动画效果 */
.sidebar-toggle.animating {
  transform: translateY(-50%) rotate(90deg);
}

.logo-container {
  display: flex;
  align-items: center;
  margin-right: 440px;
}

.logo {
  height: 70px; /* 调整logo高度以适应新的导航栏高度 */
  width: 250px;
}

.menu-items {
  display: flex;
}

.main-content {
  margin-top: 80px;
}

.main-content.chat-page {
  height: calc(100vh - 80px);
  overflow: hidden;
}

/* 数据服务页面样式 - 不允许滚动，固定高度 */
.main-content.mars-page {
  height: calc(100vh - 80px);
  overflow: hidden;
}
</style>